// 分包

import { defineComponent, ref, reactive, nextTick } from "vue";
import { VxeForm } from "vxe-table";
import { onSave, onDetail } from "@/api/subcontract/apply";
import CommonModal from "@/components/common-modal";
import Upload from "@/components/upload/index.vue";

export default defineComponent({
  props: {
    modelValue: {
      type: Boolean,
      dafault: false,
    },
    contractId: String,
    selectRow: Object,
  },
  emits: ["update:modelValue", "change"],
  setup(props, { emit }) {
    const form = ref(null);
    let formValidate = reactive({
      reason: "",
      reason9: "",
      reason10: "",
    });

    const listItems: any = [
      {
        field: "reason1",
        title: "生产日期及批号",
        span: 12,
        titleWidth: 130,
        titleAlign: "right",
        itemRender: {
          name: "$input",
          props: {
            placeholder: "生产日期及批号",
            readonly: false,
          },
        },
      },
      {
        field: "reason2",
        title: "保存要求",
        span: 12,
        titleWidth: 190,
        titleAlign: "right",
        itemRender: {
          name: "$input",
          props: {
            placeholder: "保存要求",
            readonly: false,
          },
        },
      },
      {
        field: "reason3",
        title: "抽样日期",
        span: 12,
        titleWidth: 130,
        titleAlign: "right",
        itemRender: {
          name: "$input",
          props: {
            placeholder: "抽样日期",
            readonly: false,
          },
        },
      },
      {
        field: "reason4",
        title: "包装形式",
        span: 12,
        titleWidth: 190,
        titleAlign: "right",
        itemRender: {
          name: "$input",
          props: {
            placeholder: "包装形式",
            readonly: false,
          },
        },
      },
      {
        field: "reason5",
        title: "送样方法",
        span: 12,
        titleWidth: 130,
        titleAlign: "right",
        itemRender: {
          name: "$input",
          props: {
            placeholder: "送样方法",
            readonly: false,
          },
        },
      },
      {
        field: "reason6",
        title: "封装情况",
        span: 12,
        titleWidth: 190,
        titleAlign: "right",
        itemRender: {
          name: "$input",
          props: {
            placeholder: "封装情况",
            readonly: false,
          },
        },
      },
      {
        field: "reason7",
        title: "送样情况",
        span: 12,
        titleWidth: 130,
        titleAlign: "right",
        itemRender: {
          name: "$input",
          props: {
            placeholder: "送样情况",
            readonly: false,
          },
        },
      },
      {
        field: "reason8",
        title: "包装、封条标签是否完好",
        span: 12,
        titleWidth: 190,
        titleAlign: "right",
        itemRender: {
          name: "$input",
          props: {
            placeholder: "包装、封条标签是否完好",
            readonly: false,
          },
        },
      },
      {
        field: "reason9",
        title: "现场照片",
        span: 24,
        titleWidth: 130,
        slots: { default: "livePhotos" },
      },
      {
        field: "reason10",
        title: "采样照片",
        span: 24,
        titleWidth: 130,
        slots: { default: "renderUpload" },
      },
    ];

    const ruleValidate: any = reactive({
      reason1: [
        {
          required: true,
          message: "生产日期及批号为必填项",
          trigger: "change",
        },
      ],
      reason2: [
        {
          required: true,
          message: "保存要求为必填项",
          trigger: "change",
        },
      ],
      reason3: [
        {
          required: true,
          message: "抽样日期为必填项",
          trigger: "change",
        },
      ],
      reason4: [
        {
          required: true,
          message: "包装形式为必填项",
          trigger: "change",
        },
      ],
      reason5: [
        {
          required: true,
          message: "送样方法为必填项",
          trigger: "change",
        },
      ],
      reason6: [
        {
          required: true,
          message: "封装情况为必填项",
          trigger: "change",
        },
      ],
      reason7: [
        {
          required: true,
          message: "送样情况为必填项",
          trigger: "change",
        },
      ],
      reason8: [
        {
          required: true,
          message: "包装、封条标签是否完好为必填项",
          trigger: "change",
        },
      ],
      reason9: [
        {
          required: true,
          message: "包装、封条标签是否完好为必填项",
          trigger: "change",
        },
      ],
      reason10: [
        {
          required: true,
          message: "包装、封条标签是否完好为必填项",
          trigger: "change",
        },
      ],
    });

    const renderUpload = (params) => {
      return (
        <Upload
          v-model={formValidate.reason9}
          onChange={() => form.value.updateStatus(params)}
        />
      );
    };

    return () => {
      return (
        <VxeForm
          title-colon
          ref={form}
          title-width="160"
          titleAlign="right"
          data={formValidate}
          rules={ruleValidate}
          span={24}
          items={listItems}
          v-slots={{ renderUpload }}
        ></VxeForm>
      );
    };
  },
});
